<template>
    <div class="container">
        <van-nav-bar title="发现" />

        <van-pull-refresh 
            v-model="refreshing"
            @refresh="OnRefresh"
        >
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="OnLoad"
            >
                <div class="box">
                    <div 
                        class="item"
                        v-for="(item ,index) in list"
                        :key ="item.id"
                    >
                        <div class="top">
                            <div class="avatar">
                                <div class="image">
                                    <img :src="item.business.avatar_cdn" />
                                </div>
                                <div class="name">{{ item.business.nickname }}</div>
                            </div>
                        </div>

                        <div class="title">{{ item.orderProduct.comment }}</div>

                        <div class="thumbs">
                            <div
                                class="image"
                                v-for="(img, index) in item.orderProduct.thumbs_text"
                                :key="index"
                                @click="preview(item.orderProduct.thumbs_text, index)"
                            >
                                <van-image width="100" height="100" fit="cover" :src="img" />
                            </div>
                        </div>

                        <div class="product" @click="ToProduct(item.product.id)">
                            <div class="left">
                                <img :src="item.product.thumb_text" />
                            </div>
                            <div class="right">
                                <div class="name">{{ item.product.name }}</div>
                                <div class="price">￥{{ item.product.price }}</div>
                            </div>
                        </div>

                        <div class="action">
                            <div class="left">{{ item.createtime_date }}</div>
                            <div class="right">
                                <div class="item" @click="like(item.id, index)">
                                    <!-- 已点赞 -->
                                    <van-icon name="like" color="red" v-if="item.likes_status" />
                                    <!-- 未点赞 -->
                                    <van-icon name="like-o" v-else />
                                    <!-- 点赞数量 -->
                                    <span>{{ item.likes ? item.likes_count : 0 }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { showImagePreview } from "vant";

const { proxy } = getCurrentInstance();
const business = proxy.$business;
const list = ref([]);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);

onBeforeMount(() => {
    OnRefresh();
})

const OnRefresh = () => {
    refreshing.value = true;
    loading.value = true;
    finished.value = false;
    page.value = 1;
    list.value = [];

    setTimeout(OnLoad, 1500);
};

/**
 * 数据加载OnLoad步骤
 * 如果等于true说明当前进行下拉刷新
 * 组装数据
 * 发起请求
 * 请求发送完毕后，加载状态也就完毕了,懒加载
 * 处理请求后的数据
 * 判断是否加载完所有数据
 */
const OnLoad = () => 
{
    if(refreshing.value)
    {
        refreshing.value = false;
    };

    let params = {
        page:page.value,
        busid:business.busid
    };

    const result = proxy.$http.post({
        url:'/index/share',
        params
    });

    if(result.code === 1)
    {
        let count = result.data.count ? result.data.count : 0;
        list.value = result.data ? list.value.concat(result.data.list) : [];

        if(list.value.length >= count)
        {
            finished.value = true;
            return;
        };
        page.value += 1;
    }else{
        finished.value = true;
    }
};

// 跳转到商品详情页
const ToProduct = (proid) => proxy.$router.push({ path: "/product/info", query: { proid } });

// 图片预览
const preview = (img, index) => {
    showImagePreview({
        images: img, // 图片数组:url
        startPosition: index, // 从第几张图片开始预览
    });
};

// 点赞功能
const like = async (id, index) => {
    // 未登录-->让其先登录
    if (business.value.hasOwnProperty("id") === false) {
    proxy.$confirm({
        title: "请先登录",
        message: "是否确认跳转到登录页？",
    }).then(() => {
        proxy.$cookies.set("redirect", true);
        proxy.$router.push("/business/login");
    }).catch(() => {});
    return;
    }
    // 已登陆
    // 组装参数
    const params = {
        id,
        busid: business.value.id,
    };
    // 发起请求
    const result = await proxy.$http.post({
        url: "/business/like",
        params,
    });
    // 处理请求结果
    if (result.code === 1) {
    // 点赞成功
        proxy.$success({
            message: result.msg,
            onClose: () => {
                if (result.data) {
                    // 点赞
                    list.value[index].likes_status = result.data;
                    list.value[index].likes_count += 1;
                } else {
                    // 取消点赞
                    list.value[index].likes_status = result.data;
                    list.value[index].likes_count -= 1;
                }
            },
        });
    } else {
    // 点赞失败
    proxy.$fail(result.msg);
    }
};

</script>

<style scoped>
@import url('/assets/css/share.css');
</style>